<template>
	<view class="container">
		<!-- 正式页面 -->
		<view v-if="isShow">
			<view class="top-container" :style="{paddingTop: statusBarHeight + 'px'}">
				<view class="bg-container">
					<image style="height: 100%; width: 100%;" src="/static/images/ic_top_bg.png">
					</image>
				</view>

				<view class="top-title">
					<image src="/static/images/ic_title_left_icon.png" class="img_left" mode="widthFix"></image>
					<view class="top-search-container" @click="handleSearchClick">
						<image style="height: 25rpx; width: 25rpx;" src="/static/images/ic_search_gray.png"></image>
						<text class="top-search-text">输入您想出售的卡片</text>
					</view>
				</view>
				<swiper class="swiper" circular autoplay="true" interval=2000 duration=500>
					<swiper-item v-for="(item, index) in bannerList" :key="index">
						<image :src="item.mImgLink" mode="scaleToFill" @click="bannerClick(item.jumpLink)"></image>
					</swiper-item>
				</swiper>
			</view>

			<view class="menu_container">
				<block v-for="(item, index) in menuList" :key="index">
					<view class="menu_content" @click="toCardList(item.id)">
						<image :src="item.img" style="height: 48rpx; width: 58rpx;"></image>
						<text class="menu-text">{{item.name}}</text>

					</view>
				</block>
			</view>

			<view class="notice-container">
				<image src="/static/images/ic_notice.png"></image>
				<view class="notice_divider"></view>

				<swiper vertical autoplay circular :interval="3000" :duration="500" class="notice_right">
					<swiper-item v-for="(item,index) in noticeList" :key="index">
						<view  @click="toDetail(item.id)">
							<view class="notice_right_title">
								{{item.title}}
							</view>
							<view class="notice_right_content" v-html="item.content">
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>

			<view class="list-title-container">
				<image src="/static/images/ic_hot_list_title.png" style="height: 46rpx; width: 38rpx;"></image>
				<text class="list-title-text">热门卡券</text>
			</view>

			<!-- 卡券列表 -->
			<view class="card-list-container">
				<view v-for="(item, index) in hotCardList" :key="index" class="card-item">
					<!-- 卡片信息 -->
					<view class="card-info">
						<image class="card-logo" :src="item.mimg" mode="aspectFit"></image>
						<text class="card-name">{{ item.name }}</text>
					</view>
					<!-- 操作区 -->
					<view
						style="display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 20rpx;">
						<text style="font-size: 20rpx; color: #171717;">最高{{item.maxDiscount}}折</text>
						<view class="sell-btn" @click="handleSell(item.prodTypeId, item.id)">卖卡</view>
					</view>
				</view>
			</view>

			<!-- #ifndef H5 -->
			<image class="floating-customer-container" @tap="showPop" src="/static/images/ic_custom_index.png" />
			<!-- #endif -->
		</view>

		<!-- 审核页面 -->
		<view class="home_container" v-else>
			<view class="top-container" :style="{paddingTop: statusBarHeight + 'px'}">
				<view class="bg-container">
					<image style="height: 100%; width: 100%;" src="/static/images/ic_top_bg.png">
					</image>
				</view>

				<view class="top-title">
					<image src="/static/images/ic_title_left_icon.png" class="img_left" mode="widthFix"></image>
				</view>
			</view>

<!--			<view style="color: #ffffff; z-index: 1; margin-top: 10rpx; font-size: 40rpx; margin-left: 30rpx;">-->
<!--				企业合作招商合作平台</view>-->

<!--			<view style="display: flex; z-index: 1; margin: 70rpx 40rpx 15rpx 40rpx;">-->
<!--				<view @click="showPop()"-->
<!--					style="flex: 1; height: 200rpx; background-color: #d4e0ff; display: flex; justify-content: center; align-items: center; border-radius: 30rpx;">-->
<!--					<image style="height: 60rpx; width: 60rpx;" src="/static/images/ic_mine_customer.png"></image>-->
<!--					<view style="font-size: 35rpx; color: black;">专属客服</view>-->
<!--				</view>-->
<!--				<view @click="toCompany()"-->
<!--					style="flex: 1; height: 200rpx; background-color: #F4CE98; margin-left: 40rpx; display: flex; justify-content: center; align-items: center; border-radius: 30rpx;">-->
<!--					<image style="height: 60rpx; width: 60rpx;" src="/static/images/ic_mine_company.png"></image>-->
<!--					<view style="font-size: 35rpx; color: black;">企业招商</view>-->
<!--				</view>-->
<!--			</view>-->

<!--			<image style="height: 200rpx; margin-top: 40rpx; width: 100%;" :src="companyImg"></image>-->

			<view class="item-list" style="z-index: 1;">
				<view v-for="(item, index) in items" :key="index" class="item" @click="navigateToArticle(item)">
					<!-- <image :src="item.image" class="item-image" mode="scaleToFill">
						</image> -->
					<view style="font-size: 40rpx; font-weight: bold;">{{item.title}}</view>
					<view class="item-title">{{ item.content }}</view>
				</view>
			</view>

      <block v-for="(item, index) in hotCardList" :key="index">
        <view style="display: flex; justify-content: space-between; padding: 20rpx 40rpx;" @click="toCardDetail(item)">
          <view style="display: flex; align-items: center;">
            <image style="width: 120rpx; height: 120rpx;" :src="item.mimg" mode="aspectFit"></image>
            <view style="color: black; font-size: 28rpx; margin-left: 20rpx;">{{ item.name }}</view>
          </view>

          <view style="display: flex; align-items: center;">
            <text style="font-size: 22rpx;">报价</text>
            <image src="../../static/images/arrow_right.png"
                   style="width: 15rpx; height: 27rpx; margin-left: 10rpx;"></image>
          </view>
        </view>
        <view style="height: 2rpx; width: 100%; background-color: rgba(0, 0, 0, 0.09);"></view>
      </block>
		</view>

		<custom-tabbar value="index"></custom-tabbar>

		<!-- <u-popup :show="showPopup" @close="closePop()" round="20">
			<view class="popup-container">
				<view class="popup-header">
					<view style="color: #323233; font-size: 32rpx;">请选择惠收卡客服</view>
					<view style="color: #969799; font-size: 28rpx; margin-top: 16rpx;">上班时间：周一至周日 09:00~23:50</view>
				</view>
				<view class="popup-conten">
					<view class="popup-item" v-for="(item,index) in serviceList" :key="index"
						@click="handleService(item.type)">
						<image :src="item.url" mode="heightFix"></image>
						<view style="margin-left: 18rpx;">{{item.label}}</view>
					</view>
				</view>
				<view class="popup-cancel" @click="closePop">取消</view>
			</view>
		</u-popup> -->
		
		<service-popup :show="showPopup" @update:show="handleShowUpdate"></service-popup>

		<u-popup :show="showVerPopup" @close="closeVerPop()" bgColor="transparent" mode="center"
			:safeAreaInsetBottom="false" :closeOnClickOverlay="false">
			<view class="popup-version-container">
				<image style="width: 100%;" mode="widthFix" src="~@/static/images/ic_update_top.png"></image>
				<view
					style="background-color: white; border-bottom-right-radius: 34rpx; border-bottom-left-radius: 34rpx; overflow: hidden;">
					<view
						style="margin-top: 26rpx; text-align: center; font-size: 32rpx; font-weight: bold; color: #313131;">
						发现新版本{{newVersion}}</view>
					<view style="margin-top: 16rpx; margin-left: 44rpx; font-size: 24rpx; color: #636363;">更新说明</view>
					<view style="margin-top: 8rpx; margin-left: 44rpx; font-size: 24rpx; color: #454545;">{{newDesc}}
					</view>
					<view style="width: 100%; height: 2rpx; margin-top: 28rpx; background-color: #E1E1E1;"></view>
					<view style="display: flex; border-bottom-right-radius: 34rpx;">
						<view style="flex: 1; color: #2F7FFC; padding: 24rpx 0; text-align: center;"
							@click="closeVerPop()" v-if="!isForce">以后再说</view>
						<view
							style="flex: 1; background-color: #2F7FFC; color: white; padding: 24rpx 0; text-align: center;"
							@click="toUpdateApp()">立即升级</view>
					</view>

				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgHost: '',
				bannerList: [],
				menuList: [],
				hotCardList: [],
				showPopup: false,
				showVerPopup: false,
				newVersion: '',
				newDesc: '',
				newVersionLink: '',
				rightSafeArea: 0,
				statusBarHeight: 20,
				noticeList: [],
				appConfig: null,
				isForce: true,
				serviceList: [{
						type: 'qq',
						label: 'QQ在线客服',
						icon: 'qq-fill',
						color: '#12B7F5',
						url: '../../static/images/ic_customer_qq.png'
					},
					{
						type: 'wechat',
						label: '微信在线客服',
						icon: 'weixin-fill',
						color: '#09BB07',
						url: '../../static/images/ic_customer_wx.png'
					},
					{
						type: 'tel',
						label: '电话咨询客服',
						icon: 'phone-fill',
						color: '#2979FF',
						url: '../../static/images/ic_customer_phone.png'
					}
				],
				isShow: uni.getStorageSync("isShow"),
				testBannerList: [
					"https://file.huishouka.com.cn/static/ic_test_list_04.png"
				],
				navList: [{
						title: '我的收藏',
						icon: '/static/images/ic_collect.png'
					},
					{
						title: '浏览记录',
						icon: '/static/images/ic_record.png'
					},
					{
						title: '平台规则',
						icon: '/static/images/ic_rule.png'
					}
				],
				items: [{
						image: 'https://file.huishouka.com.cn/static/ic_test_list_01.png',
						title: '交易多样',
						content: '提供线上API接口等多种交易方式,还可以根据用户自由定制实现交易多样化方式'
					},
					{
						image: 'https://file.huishouka.com.cn/static/ic_test_list_03.png',
						title: '安全可靠',
						content: '为广大用户提供安全可靠、简易操作、快捷的服务，资金安全方面更有保障。'
					}
					// {
					// 	image: 'https://file.huishouka.com.cn/static/ic_test_list_02.png',
					// 	title: '共筑满意消费，守护权益每一天',
					// 	content: '2025年“3·15”国际消费者权益日以“共筑满意消费”为主题，旨在凝聚社会力量优化消费环境，提振消费信心。消费者享有安全权、知情权、选择权等九项法定权益，如遇纠纷可先与商家协商，协商未果可拨打12315投诉或通过法律途径维权。中消协倡导保存交易凭证、关注商品质量，并呼吁企业诚信经营，共同筑牢消费安全防线。让我们携手营造公平、透明、满意的消费生态，助力经济高质量发展'
					// }
				],
				companyImg: 'https://file.huishouka.com.cn/upload/2025/05/23/pc_20250523173450A004.png'
			}
		},
		async created() {
			// 获取系统信息
			const systemInfo = uni.getSystemInfoSync()
			//获取状态栏高度
			this.statusBarHeight = systemInfo.statusBarHeight
			console.log("高度", this.statusBarHeight)
			// 微信小程序适配
			// #ifdef MP-WEIXIN
			const menuRect = uni.getMenuButtonBoundingClientRect()
			this.rightSafeArea = systemInfo.windowWidth - menuRect.left // 计算右侧避让距离[6](@ref)
			// #endif
		},
		// async onShow() {
		// 	if (await this.$app.getIsOffiacal()) {
		// 		this.isOfficical = true;
		// 	} else {
		// 		this.isTest = true;
		// 	}
		// },
		// 分享微信好友
		onShareAppMessage() {
			return {
				title: '惠收卡',
				path: '/pages/index/index'
			}
		},
		// 分享朋友圈
		onShareTimeline() {
			return {
				title: '惠收卡',
				path: '/pages/index/index'
			}
		},
		async onLoad(options) {
			// 拼接地址参数
			// const params = this.$route.query;

			this.imgHost = this.$app.imgApiHost;
			this.initHomeData();

			//版本更新
			// let platform = uni.getSystemInfoSync().platform;
			// if (platform == "android") {
			// 	this.getAppVersion();
			// }

			//原生小程序传递参数
			// if (options.bd_vid) {
			// 	uni.setStorageSync('bdActivationData', options.bd_vid);
			// }
      //
			// const bdId = uni.getStorageSync('bdActivationData') ? uni.getStorageSync('bdActivationData') : '';
      //
			// //1. 检查本地缓存
			// const cachedData = uni.getStorageSync('activationData');
			// if (cachedData) {
			// 	console.log("本地配置已存在", cachedData);
			// 	return;
			// }
      //
			// try {
			// 	// 2. 手动封装 wx.login 为 Promise
			// 	const loginRes = await new Promise((resolve, reject) => {
			// 		wx.login({
			// 			success: resolve,
			// 			fail: reject
			// 		});
			// 	});
      //
			// 	// 2. 检查是否获取到 code
			// 	if (!loginRes.code) {
			// 		throw new Error('登录失败: 未获取到 code');
			// 	}
      //
			// 	// 3. 激活，调用后端接口（注意传递 code）
			// 	const res = await this.$http({
			// 		method: 'GET',
			// 		url: '/hsk/promo/activate',
			// 		data: {
			// 			code: loginRes.code,
			// 			bdVid: bdId
			// 		}
			// 	});
      //
			// 	// 4. 存储数据
			// 	if (res) {
			// 		uni.setStorageSync('activationData', res.data);
			// 	}
      //
			// } catch (err) {
			// 	console.error('激活流程异常:', err);
			// }
		},
		onShow() {
			this.initHomeData();
		},
		onPullDownRefresh() {
			this.initHomeData();
		},
		methods: {
			async getAppVersion() {
				try {
					// 1. 封装原生 API 为 Promise
					const widgetInfo = await new Promise((resolve, reject) => {
						plus.runtime.getProperty(plus.runtime.appid, resolve);
					});

					const curVersion = widgetInfo.version;
					console.log('当前版本:', curVersion);

					// 2. 发起 HTTP 请求
					const res = await this.$http({
						method: 'GET',
						url: '/version/app',
						data: {
							os: "android"
						}
					});

					// 3. 版本比对逻辑
					if (res && this.compareVersion(curVersion, res.data.version)) {
						this.newVersion = res.data.version;
						this.newDesc = res.data.log
						this.newVersionLink = res.data.link
						this.isForce = res.data.force == 1
						this.showVerPop();
					}
				} catch (error) {
					console.error('版本检查失败:', error);
				}
			},
			// 版本号对比（支持 x.x.x 格式）
			compareVersion(v1, v2) {
				return v2.localeCompare(v1, undefined, {
					numeric: true
				}) > 0;
			},
			async initHomeData() {
				this.appConfig = await this.$app.getAppConfit();
				this.getTypeList();
				this.getNoticeList();
				this.getBannerList();
			},
			async getTypeList() {
				const res = await this.$http({
					method: 'GET',
					url: '/product/type/list',
				});
				if (res) {
					this.menuList = res.data.filter(item => item.name !== '热门回收');
					this.hotCardList = await this.$app.getHotCardList(res.data.find(item => item.name === '热门回收').id);
				}
			},
			async getNoticeList() {
				const res = await this.$http({
					method: 'GET',
					url: '/article/notice/list',
					data: {
						pageSize: 3,
						pageNum: 1
					}
				});

				if (res) {
					this.noticeList = res.rows
				}
			},
			async getBannerList() {
				const res = await this.$http({
					method: 'GET',
					url: '/ad/generate/1',
				})

				if (res) {
					this.bannerList = res.data
				}
			},
			toDetail(id) {
				uni.navigateTo({
					url: `/pages/detail/detail?id=${id}`
				})
			},
			toCardList(typeId) {
				uni.reLaunch({
					url: `/pages/card-list/card-list?id=${typeId}`
				})
			},
			showPop() {
				this.showPopup = true;
			},
			closePop() {
				this.showPopup = false
			},
			// 响应子组件事件，更新状态
			handleShowUpdate(newValue) {
				this.showPopup = newValue;
			},
			showVerPop() {
				this.showVerPopup = true;
			},
			closeVerPop() {
				this.showVerPopup = false
			},
			toCompany() {
				// uni.switchTab({
				// 	url: `/pages/TestCompany/TestCompany`
				// })
				this.showPopup = true;
			},
			toUpdateApp() {
				// 条件编译确保仅 Android 生效
				// #ifdef APP-PLUS
				// uni.showLoading({
				// 	title: '下载中...',
				// 	mask: true
				// });

				// // 创建下载任务
				// const downloadTask = uni.downloadFile({
				// 	url: this.newVersionLink,
				// 	success: (res) => {
				// 		if (res.statusCode === 200) {
				// 			 // 尝试请求权限（可能无效，需引导用户）
				// 			    plus.android.requestPermissions(['android.permission.INSTALL_PACKAGES'], async (e) => {
				// 			        if (e.deniedAlways.length > 0 || e.deniedPresent.length > 0) {
				// 			            // 引导用户到设置页面
				// 			            guideUserToAuthorize('请在设置中开启安装未知来源应用的权限');
				// 			        } else {
				// 			            this.installApk(res.tempFilePath);
				// 			        }
				// 			    });
				// 		} else {
				// 			uni.showToast({
				// 				title: '下载失败',
				// 				icon: 'none'
				// 			});
				// 		}
				// 	},
				// 	fail: (err) => {
				// 		uni.showModal({
				// 			title: '错误',
				// 			content: '下载失败：' + err.errMsg
				// 		});
				// 	},
				// 	complete: () => {
				// 		uni.hideLoading();
				// 	}
				// });

				// // 监听下载进度
				// downloadTask.onProgressUpdate((res) => {
				// 	console.log('下载进度:', res.progress + '%');
				// 	uni.showLoading({
				// 		title: `下载中 ${res.progress}%`
				// 	});
				// });

				plus.runtime.openURL(this.newVersionLink);
				// #endif
			},
			installApk(filePath) {
				// #ifdef APP-PLUS
				plus.runtime.install(
					filePath, {
						force: true
					}, // 强制覆盖安装
					() => {
						uni.showToast({
							title: '安装完成'
						});
						plus.runtime.restart(); // 重启应用生效
					},
					(err) => {
						uni.showModal({
							title: '安装失败',
							content: '请手动安装：设置->安全->允许未知来源',
							confirmText: '前往设置',
							success: (res) => {
								if (res.confirm) plus.runtime.openURL(plus.os.name === 'iOS' ?
									'App-Prefs:root' : 'package:com.your.appid');
							}
						});
					}
				);
				// #endif
			},
			// 去搜索页
			handleSearchClick() {
				uni.navigateTo({
					url: `/pages/search/search?hotCardList=${encodeURIComponent(JSON.stringify(this.hotCardList))}`
				})
			},
			// banner跳转
			bannerClick(link) {
        if (link && link.trim() != "") {
          this.$app.openUrl(link)
        }
			},
			// 去销卡
			handleSell(selectedId, cardId) {
				uni.navigateTo({
					url: `/pages/sale-card/sale-card?typeId=${selectedId}&cardId=${cardId}`
				})
			},
			handleService(type) {
				console.log(this.appConfig)
				switch (type) {
					case 'qq':
						// 复制qq号
						uni.setClipboardData({
							data: this.appConfig.qq,
							success() {
								
								this.$app.toast("客服："+ this.appConfig.qq)
							}
						})
						break
					case 'wechat':
						// #ifdef MP-WEIXIN
						// 调用企业微信客服聊天
						wx.openCustomerServiceChat({
							extInfo: {
								url: 'https://work.weixin.qq.com/kfid/kfc23a563ee7443bea4'
							},
							corpId: 'ww7362e6d2fe8ba240',
							success: function(response) {
								console.log("客服聊天成功", response);
							},
							fail: function(error) {
								console.log("客服聊天失败", error);
							}
						});
						// #endif
						// #ifdef APP-PLUS
						this.$app.openUrl("https://work.weixin.qq.com/kfid/kfc23a563ee7443bea4", true)
						// #endif
						// #ifdef H5
						this.$app.toCopy("13143488558")
						// #endif
						break
					case 'tel':
						// 拨打客服电话
						// uni.makePhoneCall({
						// 	phoneNumber: this.appConfig.phone
						// })
						// this.$app.toCopy(this.appConfig.phone)
						uni.makePhoneCall({
							// 手机号 这里可以直接写号码如 12345 也可以写获取号码的字段如this.mobile
							phoneNumber: this.appConfig.phone,
							// 成功回调
							success: (res) => {
								console.log('调用成功!')
							},
							// 失败回调
							fail: (res) => {
								console.log('调用失败!')
							}
						});
						break
				}
			},
			navigateToArticle(item) {
				console.log("文章列表" + item)
				uni.navigateTo({
					url: `/pages/article/article?title=${encodeURIComponent(item.title)}&imageSrc=${encodeURIComponent(item.image)}&content=${encodeURIComponent(item.content)}`
				});
			},
			navClick(index) {
				console.log("nav按钮" + index)
				if (index === 0) {
					uni.navigateTo({
						url: '/pages/articleList/articleList'
					});
				} else if (index === 1) {
					uni.navigateTo({
						url: '/pages/articleList/articleList'
					});
				} else if (index === 2) {
					uni.navigateTo({
						url: `/pages/article/article?title=${encodeURIComponent(this.items[2].title)}&imageSrc=${encodeURIComponent(this.items[2].image)}&content=${encodeURIComponent(this.items[2].content)}`
					})
				} else {
					uni.showModal({
						title: "温馨提示",
						content: "更多功能正在加紧上线，敬请期待！",
						showCancel: false,
						confirmText: '确定'
					});
				}
			},
      toCardDetail(item) {
        uni.setStorageSync('selectedItem', JSON.stringify(item));
        uni.navigateTo({
          url: '/pages/shop-detail/shop-detail'
        })
      }
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		position: relative;
		width: 100vw;
		min-height: 100vh;
	}


	.floating-customer-container {
		height: 116rpx;
		width: 96rpx;
		position: fixed;
		bottom: 30%;
		right: 30rpx;
		z-index: 1000;
	}

	.bg-container {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 450rpx;
		/* 控制背景图高度为 Banner 的一半 */
		z-index: 0;
		/* 确保背景图在 Banner 下方 */
	}

	.top-container {
		.top-title {
			display: flex;
			flex-direction: column;
			padding: 28.85rpx 38.46rpx;

			.img_left {
				width: 190rpx;
			}

			.top-search-container {
				z-index: 1;
				height: 60rpx;
				width: 100%;
				background-color: white;
				border-radius: 30rpx;
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				padding-left: 20rpx;

				.top-search-text {
					font-size: 22rpx;
					color: #666;
				}
			}
		}

		.swiper {
			//margin: 0rpx 24rpx;
      width: calc(100% - 48rpx);
      margin-left: 24rpx;
      margin-right: 24rpx;
			height: 220rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 24rpx;
			}
		}
	}

	.menu_container {
		margin-top: 58rpx;
		display: flex;
		flex-wrap: wrap;

		.menu_content {
			padding-bottom: 56rpx;
			align-items: center;
			width: calc(100% / 3);
			display: flex;
			flex-direction: column;
		}

		.menu-text {
			margin-top: 10rpx;
			font-size: 24rpx;
			color: #000;
		}
	}

	.notice-container {
		background-color: #ECF3FE;
		padding: 14rpx 40rpx;
		border-radius: 12rpx;
		display: flex;
		margin: 0 42rpx;
		align-items: center;

		image {
			width: 90.38rpx;
			height: 80.77rpx;
		}

		.notice_divider {
			height: 70rpx;
			width: 2rpx;
			margin: 0 34rpx;
			background-color: #4D7EF4;
		}

		.notice_right {
			flex: 1;
      height: 115rpx;

			.notice_right_title {
				font-size: 28rpx;
				font-weight: 700;
				color: #000;
			}

			.notice_right_content {
				//margin-top: 8rpx;
				font-size: 24rpx;
				color: rgba(0, 0, 0, 0.4);
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden; //溢出内容隐藏
				text-overflow: ellipsis; //文本溢出部分用省略号表示
				display: -webkit-box; //特别显示模式
				-webkit-line-clamp: 2; //行数
				line-clamp: 2;
				-webkit-box-orient: vertical; //盒子中内容竖直排列
			}
		}
	}

	.list-title-container {
		margin-top: 58rpx;
		display: flex;
		align-items: center;
		padding: 0rpx 50rpx;

		.list-title-text {
			font-size: 32rpx;
			font-weight: 700;
			color: #000;
			margin-left: 18rpx;
		}
	}

	.card-list-container {
		padding: 0 50rpx;
		margin-top: 28rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		//列表
		.card-item {
			width: calc(50% - 23rpx);
			background-color: #F3F8FB;
			padding: 14rpx 20rpx;
			margin-bottom: 28rpx;
			border-radius: 16rpx;
			display: flex;
			flex-direction: column;

			.card-info {
				display: flex;
				justify-content: space-between;

				.card-logo {
					width: 100rpx;
					height: 100rpx;
					margin-right: 22rpx;
					flex-shrink: 0;
				}

				.card-name {
					font-size: 32rpx;
					color: #333;
					font-weight: 500;
				}
			}

			.sell-btn {
				width: 128rpx;
				text-align: center;
				padding: 8rpx 0;
				border: #4991FB solid 2rpx;
				color: #333;
				font-size: 28rpx;
				border-radius: 40rpx;
			}
		}
	}

	.popup-container {
		padding: 40rpx 0;
	}

	.popup-header {
		text-align: center;
	}

	.popup-conten {
		margin-top: 40rpx;
	}

	.popup-item {
		padding: 28rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #323233;

		image {
			height: 36rpx;
		}
	}

	.popup-cancel {
		padding: 28rpx;
		display: flex;
		justify-content: center;
		color: #646566;
		font-size: 32rpx;
	}

	.home_container {
		padding-top: 60rpx;
		display: flex;
		flex-direction: column;

		.title {
			font-size: 33rpx;
			font-weight: bold;
			margin: 25rpx;
			color: #1296db;
		}

		.swiper {
			margin: 25rpx;

			image {
				width: 100%;
			}
		}

		/* 导航图标样式 */
		.nav-scroll {
			white-space: nowrap;
			padding: 30rpx 0;
			background: #fff;
		}

		.nav-item {
			display: inline-flex;
			flex-direction: column;
			align-items: center;
			width: calc(100% / 3);
		}

		.nav-icon {
			width: 80rpx;
			height: 80rpx;
			margin-bottom: 15rpx;
		}

		// 文章标题
		.list_title {
			display: flex;
			align-items: center;
			padding: 0rpx 38.46rpx;
		}

		// 文章列表
		.item-list {
			margin-top: 40rpx;
			padding: 20rpx;
		}

		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: #edfffe;
			border-radius: 15rpx;
			box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
			margin-bottom: 20rpx;
			overflow: hidden;
			padding: 40rpx 20rpx;
		}

		.item-image {
			height: 300rpx;
			width: 600rpx;
			margin: 10rpx;
			object-fit: cover;
		}

		.item-title {
			font-size: 28rpx;
			color: #333;
			margin: 10rpx 60rpx;
			// white-space: nowrap;
			// overflow: hidden;
			// text-overflow: ellipsis;
			margin-top: 20rpx;
		}
	}

	.popup-version-container {
		width: 530rpx;
		display: flex;
		flex-direction: column;
	}
</style>